// pages/my/mySecond/bodyroundDetail/bodyroundDetail.js
import * as echarts from '../../../../ec-canvas/echarts';
// import * as echarts from '../../ec-canvas/echarts';
import {GetAroundList,GetFatModel} from "../../../../api/api";
import {getCurrentDate} from "../../../../utils/timeTool"
import getNextDate from "../../../../utils/getNextDate";

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      // onInit: initChart
      lazyLoad: true
    },
    active:"0",
    currentDates:[],
    currentvals:[],
    bustDatas:[],//胸围数据
    waistDatas:[],//腰围数据
    hiplineDatas:[],//臀围数据
    highhiplineDatas:[],//上臂围数据
    thighlineDatas:[],//大腿围数据
    cruslineDatas:[],//小腿围数据
    latelyDatas:{}, 
    bodyRoundText:["胸围","腰围","臀围","上臂围","大腿围","小腿围"],

    latelyDate:"0",
    latelyTime:"0",
    latelyTitle:"胸围",
    latelyVal:0,
    flag:true
  },
  init(){
    let {currentDates,currentvals}=this.data;
    this.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      this.setOption(chart,currentDates,currentvals);
     

      return chart;
    });
  },
  toggleActive(e){
    let active=e.currentTarget.dataset.active;
    if (active==this.data.active) { //值相等是直接跳出去
        return;
    } 
    if(this.data.flag){
      this.setData({
        flag:false
      })
      setTimeout(()=>{
        this.setData({
          flag:true
        })
      },800)
      this.setData({
        active,
      })
      this.getcurrentvals();
    }
  },
  getcurrentvals(){
    let {bustDatas,waistDatas,hiplineDatas,highhiplineDatas,thighlineDatas,cruslineDatas,active,bodyRoundText,latelyDatas}=this.data;
    let currentvals=[];
    switch (active) {
      case "0":
        currentvals=bustDatas;
        this.setData({
          currentvals,
          latelyTitle:bodyRoundText[active],
          latelyVal:latelyDatas.bust,
         })
        break;
      case "1":
        currentvals=waistDatas;
        this.setData({
          currentvals,
          latelyTitle:bodyRoundText[active],
          latelyVal:latelyDatas.waist,
         })
        break;
      case "2":
        currentvals=hiplineDatas;
        this.setData({
          currentvals,
          latelyTitle:bodyRoundText[active],
          latelyVal:latelyDatas.hipline,
         })
        break;
      case "3":
        currentvals=highhiplineDatas;
        this.setData({
          currentvals,
          latelyTitle:bodyRoundText[active],
          latelyVal:latelyDatas.highhipline,
         })
        break;
      case "4":
        currentvals=thighlineDatas;
        this.setData({
          currentvals,
          latelyTitle:bodyRoundText[active],
          latelyVal:latelyDatas.thighline,
         })
        break;
      case "5":
        currentvals=cruslineDatas;
        this.setData({
          currentvals,
          latelyTitle:bodyRoundText[active],
          latelyVal:latelyDatas.crusline,
         })
        break;
     }
     this.ecComponent = this.selectComponent('#mychart-dom-line');
     this.init();
  },
  setOption(chart,currentDates,currentvals){
      var option = {
      color: ["#8279ea"],
      // legend: {
      //   data: ['体重(KG)', '脂肪比(%)'],
      //   orient: 'horizontal',  
      //   top: 10,
      //   left: 'center',
      //   z: 100
      // },
      grid: {
        containLabel: true,
        top: '18%',   // 等价于 y: '16%'
        left: '3%', 
        right: '5%',
        bottom: '3%',
      },
      tooltip: {
        show: true,
        trigger: 'axis',
      },
      xAxis: {//轴名标注
        type: 'category',
        boundaryGap: false,
        data: currentDates,
        axisLine: { //x轴的设置
          lineStyle: {
              color: "#d1d1d1" //x轴的颜色。
          }
        },
        axisLabel: {//x轴文字设置
          textStyle: {
              fontSize: 10, //文字的字体大小
              color: "#808080"
          },
        },
  
      },
      yAxis: {//直角坐标系中的纵轴
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color:"#d1d1d1"
          }
        },
        axisLine: {
          lineStyle: {
              color: "#fff" //y轴的颜色。
          }
        },
        axisLabel: {//x轴文字设置
          textStyle: {
              fontSize: 10, //文字的字体大小
              color: "#828282"
          },
        },
    
      },
      
      series: [{
        name: '单位(cm)',
        type: 'line',
        smooth: true,
        data: currentvals
      }
    ]
    };
    chart.setOption(option);
    //点击事件
  //   chart.on('click', (params)=> {
  //     // 控制台打印数据的名称
  //     this.setData({

  //     })
  // });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.setData({
    // })
    let TZCphone=wx.getStorageSync("TZCphone");
    
    let openid=wx.getStorageSync('TZCopenid');
    if (!openid) {
      openid=""
    }    

    let getdata={
          phone:TZCphone,
          openid:openid
        }
    if(TZCphone){
      wx.showLoading({
        title: '加载中',
        mask:true
      })
      GetFatModel(getdata,(e)=>{
        // this.setData({
        //   userId:e.data.id
        // })
        let data={
          fatid: e.data.id,
          startdate: getNextDate(getCurrentDate().date,-300),
          enddate:getNextDate(getCurrentDate().date,1),
        }
        GetAroundList(data,(e)=>{
          wx.hideLoading()
          // 这些接口不能让用户 只记录一个体围  所有 记录胸围 换成记录体围要用户把所有都记录下来
          if(e.data){
            let bustDatas=[];
            let waistDatas=[];
            let hiplineDatas=[];
            let highhiplineDatas=[];
            let thighlineDatas=[];
            let cruslineDatas=[];
            let bodyRoundDate=[];
            e.data.forEach((item)=>{
             bustDatas.push(item.bust);
             waistDatas.push(item.waist);
             hiplineDatas.push(item.hipline);
             highhiplineDatas.push(item.highhipline);
             thighlineDatas.push(item.thighline);
             cruslineDatas.push(item.crusline);
             bodyRoundDate.push(item.createdate.substring(5,10));
            })
            let latelyDatas=e.data.reverse()[0];
            this.setData({
              bustDatas,
              waistDatas,
              hiplineDatas,
              highhiplineDatas,
              thighlineDatas,
              cruslineDatas,
              bodyRoundDate,
              currentDates:bodyRoundDate,
              active:options.type||"0",
              latelyDatas,
              latelyDate:latelyDatas.createdate.substring(0,10),
              latelyTime:latelyDatas.createdate.substring(11,16)
            })
            this.getcurrentvals();
          }
        })

      })

    }
    // 改变头部title
    //   wx.setNavigationBarTitle({
    //     title: ""
    //  })
    //获取各部分体围的数据


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})